<template>
  <nav>
    <ul>
      <li>
        <router-link to="/" exact>博客</router-link>
        <router-link to="/add" exact>写博客</router-link>
      </li>
    </ul>
  </nav>
</template>


<script>
  export default {
    name: "blogheader"
  }

</script>


<style scoped>
  nav {
    position: fixed;
    width: 100%;
    z-index: 1500;
  }

  ul {
    list-style-type: none;
    text-align: center;
    margin: 0 10px;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: black;
    text-decoration: none;
    padding: 12px;
    border-radius: 5px;
  }

  nav {
    background-color: grey;
    padding: 30px 0;
    margin-bottom: 40px;
  }

  .router-link-active {
    background: rgb(251, 114, 153);
    color: white;
  }

</style>
